<template>
    <el-dialog
        :model-value="props.value"
        @closed="props.closed"
        :title="props.detail ? '修改页面' : '新建页面'"
        :width="600"
    >
        <el-form ref="formRef" :model="formData" :rules="rules" label-width="100px">
            <el-form-item label="页面名称" prop="displayName">
                <el-input v-model="formData.displayName" placeholder="请输入模型名称" maxlength="50" />
            </el-form-item>
            <el-form-item label="标识符" prop="pageCode">
                <el-input
                    v-model="formData.pageCode"
                    placeholder="请输入标识符"
                    :disabled="!!props.detail"
                    maxlength="50"
                />
            </el-form-item>
            <el-form-item label="页面描述" prop="description">
                <el-input
                    v-model="formData.description"
                    maxlength="200"
                    show-word-limit
                    type="textarea"
                    placeholder="请输入描述"
                />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="props.close">取消</el-button>
                <el-button type="primary" @click="onSubmit" :loading="loading">确定</el-button>
            </div>
        </template>
    </el-dialog>
</template>
<script setup lang="ts">
import type { FormInstance } from 'element-plus';
import { reactive } from 'vue';
import type { PopupBoxProps } from '@great/utils';
import { viewService } from '@great/services';
import { useRequest } from 'vue-request';

interface IProps extends PopupBoxProps {
    detail?: any;
    callback: () => void;
}
const props = defineProps<IProps>();

const formData = reactive({
    displayName: '',
    pageCode: '',
    description: undefined,
    ...props.detail
});
const formRef = useTemplateRef<FormInstance>('formRef');
const rules = reactive({
    displayName: [{ required: true, message: '请输入页面名称', trigger: ['blur', 'change'] }],
    pageCode: [
        { required: true, message: '请输入标识符', trigger: ['blur', 'change'] },
        {
            validator: (rule, value, callback) => {
                if (!/^[a-z]+(?:[A-Z][a-z0-9]*)*$/.test(value)) {
                    return callback(new Error('必须是字母数字组合且符合驼峰命名法'));
                }
                callback();
            },
            trigger: ['blur', 'change']
        }
    ]
});

const { run, loading } = useRequest(
    () => {
        if (props.detail) {
            return viewService.update({
                ...props.detail,
                ...formData
            });
        }
        return viewService.create({
            ...formData
        });
    },
    {
        manual: true,
        onSuccess() {
            props.close();
            props.callback?.();
        }
    }
);

function onSubmit() {
    formRef.value?.validate(valid => {
        valid && run();
    });
}
</script>
<style scoped lang="scss"></style>
